<!-- 职位管理列表 启用、停用、删除等弹出框 -->
<template>
  <a-modal
    width="50%"
    v-model:visible="modalVisible"
    @ok="handleOk"
    @cancel="handleCancel"
    :mask-closable="false"
    draggable
    title-align="center"
  >
    <template #title>
      <div v-if="type === 1">启用职位</div>
      <div v-else-if="type === 2">停用职位</div>
      <div v-else-if="type === 3">删除职位</div>
    </template>
    <div>
      {{
        type === 1
          ? '是否启用该职位？'
          : type === 2
          ? '是否停用该职位？'
          : '是否删除该职位？'
      }}
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
const props = withDefaults(
  defineProps<{
    visible: boolean; // 是否显示对话框
    /* 
      1 启用
      2 停用
      3 删除
    */
    type: number;
  }>(),
  {
    visible: false
  }
);

const emit = defineEmits(['update:visible', 'positionEmit']);

const modalVisible = computed({
  get() {
    return props.visible;
  },
  set(visible: boolean) {
    emit('update:visible', visible);
  }
});

// 保存
const handleOk = () => {
  modalVisible.value = false;
  emit('positionEmit', props.type);
};

// 取消
const handleCancel = () => {
  modalVisible.value = false;
};
</script>

<style scoped lang="less">
.content {
  .dept {
    :deep(.arco-form-item-content-wrapper) {
      width: 200%;
    }
  }
}
</style>
